<template>
	<el-container :style="`height:${pageHeight}px; border: 1px solid #eee`">
		<el-aside width="250px" style="background-color: rgb(238, 241, 246); ">

			<el-menu @select="handleSelect" default-active="Exams">
				<el-submenu v-for="(menu,i) in menus" :key="i" :index="i.toString()">
					<template slot="title"><i class="el-icon-menu"></i>{{menu.name}}</template>
					<el-menu-item v-show="sitem.permit<=permit" v-for="(sitem, sindex) in menu.children" :key="sindex" :index="sitem.index">
							{{ '  ' + sitem.name}}
					</el-menu-item>
				</el-submenu>
			</el-menu>
			
		</el-aside>
		
		<el-main>
			<router-view to="QuForm"/>
		</el-main>
	</el-container>
</template>
<script>
export default {
	name: "ManagePage",
	data() {
		return {
			pageHeight: 650,
			permit: 2,
			menus: [
				{ 
					name: '题目管理', children: [
						{ name: '题目列表', index: 'Questions', permit: 1 }
					],
				},
				{
					name: '科目管理', children: [
						{ name: '科目列表', index: 'Subjects', permit: 1 }
					],
				},
				{
					name: '考试管理', children: [
						{ name: '考试历史', index: 'ExamHistory', permit: 0 },
						{ name: '考试列表', index: 'Exams', permit: 0 },
					],
				}
			]
		}
	},
	mounted() {
		this.pageHeight = window.innerHeight - 62;
		var that = this
		window.onresize = () => {
			return (() => {
					that.pageHeight = window.innerHeight - 62;
			})()
		}
	},
	methods: {
		handleSelect(index){
			this.$router.push({name:index})
			// console.log(index);
		}
	},
}
</script>
<style>
    
</style>